<template>
	<view class="border-box">
		<navbar title="积分详情" />
		<view class="points-head border-box flex justify-content_space-between align-item_center">
			<view>总积分</view>
			<view>{{user.info.point}}</view>
		</view>

		<view class="points-main border-box">
			<view class="head justify-content_flex-end flex align-item_center">
				<!-- <view class="item flex align-item_center">
					<view>排序</view>
					<image class="block" src="https://mall-admin.xinjiafu.net/mini-static/images/points/14.png" />
				</view> -->
				<view class="item flex align-item_center" @click="select">
					<view>{{params.addStatus === true?'收入':params.addStatus === false?'支出':'筛选'}}</view>
					<image class="block" src="https://mall-admin.xinjiafu.net/mini-static/images/points/15.png" />
				</view>
			</view>
			<view class="line"></view>
			<view class="sub">
				<empty v-if="record.list.length === 0" />
				<view class="item" v-for="item in record.list" :key="item.id">
					<view class="time">05-01</view>
					<view :style="{'color':item.point>=0?'#333333':'#999999'}"
						class="product flex align-item_center justify-content_space-between c_333333">
						<view>{{item.title}}</view>
						<view>{{item.point}}</view>
					</view>
				</view>
			</view>
		</view>

		<up-picker :show="filtration.show" :columns="filtration.columns" confirmColor="#333333" @cancel="filtrationCancel"
			@confirm="filtrationConfirm" keyName="label"></up-picker>

		<u-gap height="110rpx"></u-gap>
		<tabbar :current="4" />
	</view>
</template>

<script setup>
	import empty from "@/components/empty.vue"
	import tabbar from "@/components/tabbar.vue"
	import navbar from "@/components/navbar.vue"
	import PointApi from "@/sheep/api/member/point.js"
	import userApi from "@/api/member/user.js"
	import {
		onLoad,
		onShow,
		onReachBottom,
	} from "@dcloudio/uni-app"
	import {
		reactive,
		ref
	} from "vue"

	onReachBottom(() => {
		if (record.list.length >= record.total) return;
		params.pageNo++;
		pointPage()
	})

	const user = reactive({
		info: {
			point: 0,
		}
	})
	const userGet = () => {
		userApi.get().then(res => {
			if (res.code === 0) {
				user.info = res.data;
			}
		})
	}

	const filtrationConfirm = (val) => {
		const item = val.value[0]
		if (item.status === 0) params.addStatus = undefined;
		else if (item.status === 1) params.addStatus = true;
		else if (item.status === 2) params.addStatus = false;
		params.pageNo = 1;
		pointPage()
		filtrationCancel()
	}

	const filtrationCancel = () => {
		filtration.show = false;
	}

	const filtration = reactive({
		show: false,
		columns: [
			[{
				label: "全部",
				status: 0
			}, {
				label: "收入",
				status: 1
			}, {
				label: "支出",
				status: 2
			}]
		]
	})

	const select = () => {
		filtration.show = true;
	}

	const record = reactive({
		list: [],
		total: 0
	})

	const params = reactive({
		pageNo: 1,
		pageSize: 15,
		addStatus: undefined
	})

	const pointPage = () => {
		PointApi.getPointRecordPage(params).then(res => {
			if (params.pageNo === 1) record.list = res.data.list;
			else record.list = record.list.concat(res.data.list);
			record.total = res.data.total;
		})
	}
	onLoad(() => {
		pointPage()
		userGet()
	})
</script>


<style>
	page {
		background: #F8F3E7;
	}
</style>
<style scoped lang="scss">
	:deep(.u-popup__content) {
		background-color: #F8F3E7 !important;
	}

	.points-main {
		width: 710rpx;
		margin: 0 auto;
		border-radius: 8rpx;
		background: #EFE5D0;

		.sub {
			padding: 0 20rpx 100rpx;

			.item {
				.product {
					padding-bottom: 30rpx;
					border-bottom: 1rpx solid #CCCCCC;
					font-size: 28rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 40.54rpx;
				}

				.time {
					font-size: 28rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 40.54rpx;
					color: rgba(102, 102, 102, 1);
					padding-bottom: 20rpx;
					padding-top: 30rpx;
				}
			}
		}

		.line {
			width: 100%;
			height: 2rpx;
			background-color: #CCCCCC;
		}

		.head {
			padding: 20rpx;

			.item:last-child {
				margin-left: 58rpx;
			}

			.item {
				view {
					font-size: 28rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 40.54rpx;
					color: rgba(64, 3, 3, 1);
				}

				image {
					width: 20rpx;
					height: 24rpx;
					margin-left: 18rpx;
				}
			}
		}
	}

	.points-head {
		padding: 48rpx 38rpx;

		view:last-child {
			font-size: 40rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 57.92rpx;
			color: rgba(64, 3, 3, 1);

		}

		view:first-child {
			font-size: 32rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 46.34rpx;
			color: rgba(64, 3, 3, 1);
		}
	}
</style>